import React from 'react';
import {
    ButtonToolbar, 
    Button, 
    Modal, 
    ControlLabel, 
    FormControl,
    FormGroup, 
    HelpBlock
} from 'react-bootstrap';

import './index.scss';

import './index.scss';
export default class Topic extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            formIpt: ''
        };
    }

    toggleModal() {
        this.setState({
            showModal: !this.state.showModal
        })
    }

    handleChange(e) {
        let name = e.target.name;
        this.setState({
            [name]: e.target.value
        });
    }

    render() {
        return (
            <div className="topic">
                <FormGroup
                    controlId="formBasicText"
                >
                    <ControlLabel>Working example with validation</ControlLabel>
                    <FormControl
                        type="text"
                        name="formIpt"
                        value={this.state.formIpt}
                        placeholder="Enter text"
                        onChange={e => this.handleChange(e)}
                    />
                    <FormControl.Feedback />
                    <HelpBlock>Validation is based on string length.</HelpBlock>
                </FormGroup>

                <div className="btns">
                    <ButtonToolbar>
                        <Button bsStyle="default" onClick={this.toggleModal.bind(this)}>default</Button>
                        <Button bsStyle={'primary'} onClick={this.toggleModal.bind(this)}>Primary</Button>
                        <Button bsStyle='success' onClick={this.toggleModal.bind(this)}>success</Button>
                        <Button bsStyle='info' onClick={this.toggleModal.bind(this)}>Info</Button>
                        <Button bsStyle='warning' onClick={this.toggleModal.bind(this)}>Warning</Button>
                        <Button bsStyle='danger' onClick={this.toggleModal.bind(this)}>Danger</Button>
                        <Button bsStyle='link' onClick={this.toggleModal.bind(this)}>Link</Button>
                    </ButtonToolbar>
                </div>
                <Modal
                    show={this.state.showModal}
                    onHide={ () => this.toggleModal() }
                    container={this}
                    aria-labelledby="contained-modal-title"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id="Contained-modal-title">容量内嵌对话框</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.toggleModal.bind(this)}>取消</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
}